import { View, Text, Button, Span } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import CustomTabBar from "@/component/CustomTabBar";
import { Avatar, Grid, Image } from "@nutui/nutui-react-taro";
import './my.scss'
import { IconFont } from '@nutui/icons-react-taro';
import my_yl_bg from '@/static/images/my_yl.png';
import  request  from '@/utils/request.js';
import { useState } from 'react';
import Taro from '@tarojs/taro';
import '@nutui/nutui-react-taro/dist/style.css'

definePageConfig({
  navigationStyle: 'custom',
})


export default function Index() {
  useLoad(() => {
    getAccountInfo();
  })

  const [accInfo,setAccInfo]=useState<any>({})

 const getAccountInfo=()=>{
  request({url:'api/account/info'}).then(res=>{
    setAccInfo(res.data)
  })
 }
  const myBBList=[
    {
    fontClassName:'icon-a-zu491',
    name:'我的活动'
  },
    {
    fontClassName:'icon-a-zu487',
    name:'我的订单'
  },
    {
    fontClassName:'icon-a-zu483',
    name:'我的任务'
  },
    {
    fontClassName:'icon-a-zu485',
    name:'我的钱包'
  },
    {
    fontClassName:'icon-a-zu484',
    name:'我的关注'
  },
    {
    fontClassName:'icon-a-zu494',
    name:'我的收藏'
  },
    {
    fontClassName:'icon-a-zu628',
    name:'我的社群'
  },
    {
    fontClassName:'icon-a-zu788',
    name:'我的轨迹'
  },
    {
    fontClassName:'icon-a-zu4881',
    name:'活动黑名单'
  },
    {
    fontClassName:'icon-a-zu795',
    name:'关于我们'
  },
]
const toolList=[
  {
    fontClassName:'icon-a-zu4881',
    name:'抽奖活动'
  },
    {
    fontClassName:'icon-a-zu795',
    name:'积分器'
  },
]


  return (
    < >
      <View className='avatar'>
        {Taro.getStorageSync('token')==false?<View style={{width:'100vw',height:'100rpx',display:'flex',margin:'240rpx 20rpx 20rpx 20rpx',alignItems:'center'}} onClick={()=>{Taro.navigateTo({url:'/login/login/login'})}}><IconFont fontClassName="icon-weidenglu" classPrefix="iconfont" color="#2A2B30" size={70} />
      <View className='ziliao'>点击登录</View></View>: <><Avatar
            size="70"
            src={accInfo.avatarUrl}
          />
          <View className='ziliao'>
            <View className='name'>{accInfo.nickname}</View>
            <View onClick={()=>{
                Taro.navigateTo({
                  url:`/account/editAcc?avatarUrl=${accInfo.avatarUrl}&nickname=${accInfo.nickname}&sign=${accInfo.sign||''}`
                })
            }}>ID:{accInfo.uid}<Text style={{marginLeft:'80rpx'}}>编辑资料<IconFont  fontClassName="icon-right" classPrefix="iconfont" color="#2A2B30" size={16} ></IconFont ></Text></View>
            <View >个性签名：{accInfo.sign}</View>
          </View></>
            }
        {/* <IconFont fontClassName="icon-weidenglu" classPrefix="iconfont" color="#2A2B30" size={70} />
      <View className='ziliao'>点击登录</View> */}
         
      </View>

      <View className='my_yl_wrap'>
        <Image src={my_yl_bg} width={390} height={54} >
        </Image>
        <View className='my_yl'>
          <Span className='my_yl_left'>我的娱粮:-</Span><Button className='duihuan'>去兑换
            <IconFont fontClassName="icon-right" classPrefix="iconfont" color="#2A2B30" size={18} />
          </Button>
       
        </View>
      </View>

<View className='panel'>
  <View className='title'>我的活动</View>
  <Grid columns={4} gap={7} style={{
    //@ts-ignore
    '--nutui-grid-border-color': '#ffff',
    '--nutui-grid-item-text-font-size':'$font-size-m'
  }}>
      {
        myBBList.map((item,index)=>{
          return <Grid.Item key={index} text={item.name}       onClick={()=>{
            switch(item.name){
              case "我的活动":
                Taro.navigateTo({url:'/account/myActivity'})
                break;
              case "我的订单":
                Taro.navigateTo({url:'/account/myOrder'})
                break;
              case "我的钱包":
                Taro.navigateTo({url:'/account/myWallet'})
                break;
              case "我的社群":
                Taro.navigateTo({url:'/account/myGroup'})
                break;
              case "我的轨迹":
                Taro.navigateTo({url:'/account/myFootPrint'})
                break;
              case "我的关注":
                Taro.navigateTo({url:'/account/myFollow'})
                break;
              case "我的收藏":
                Taro.navigateTo({url:'/account/myStar'})
                break;
            }
        
          }}>
           <IconFont fontClassName={item.fontClassName} classPrefix="iconfont"  size={28} />
       
          </Grid.Item>
        })
      }
    </Grid>
</View>

<View className='panel'>
<View className='title'>工具箱</View>
  <Grid columns={4} gap={7} style={{
    //@ts-ignore
    '--nutui-grid-border-color': '#ffff',
    '--nutui-grid-item-text-font-size':'$font-size-m'
  }}>
      {
        toolList.map((item,index)=>{
          return <Grid.Item key={index} text={item.name} >
           <IconFont fontClassName={item.fontClassName} classPrefix="iconfont"  size={28}
           onClick={(e)=>{
            debugger
        
          }}
           />
       
          </Grid.Item>
        })
      }
    </Grid>
</View>

      <CustomTabBar />
    </>
  )
}
